<template>
  <section class="table-ul">
    <!--title-->
    <ul class="title-group ul">
      <li v-for="(th_item, th_key) in tableTitle"
          :key="th_key"
          :style="{'width': th_item.width  || 100/tableTitle.length+'%'}"
          v-text="th_item.label"></li>
    </ul>
    <!--tbody-->

    <div class="tbody">
<!--      <vueSeamless :data='tableData' class="seamless-warp" :class-option="optionSetting">-->
      <ul class="tbody-group ul animated slideInLeft" v-for="(td, td_key) in tableData"
          :class="trActive===Number(td_key+1)?'tbody-group-active':null"
          :style="{'animation-delay': (td_key*0.01) + 's'}"
          :key="td_key">
        <li v-for="(th_item, key) in tableTitle"
            @click="handleTableTbodyTr(td, th_item.props, td[th_item.props], td_key, key)"
            :key="key"
            :style="{'width': th_item.width || 100/tableTitle.length+'%', 'text-align': textAlign || 'center'}"
        >
        <span :title="formatEncryptData(th_item.encrypt, td[th_item.props])">{{formatEncryptData(th_item.encrypt, td[th_item.props])}}</span>
<!--        <div class="more-detail" v-if="td[th_item.props].length > 10">{{ td[th_item.props] }}</div>-->
        </li>
      </ul>
<!--      </vueSeamless>-->
    </div>

    <!--end-->
  </section>
</template>

<script>
// import vueSeamless from 'vue-seamless-scroll'
const optionSetting = {
  step: 0.4, // 数值越大速度滚动越快
  limitMoveNum: 2, // 开始无缝滚动的数据量 this.dataList.length
  hoverStop: true, // 是否开启鼠标悬停stop
  direction: 1, // 0向下 1向上 2向左 3向右
  autoPlay: true, // 是否自动滚动
  openWatch: true, // 开启数据实时监控刷新dom
  singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
  singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
  waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
}
export default {
  name: 'tableModule',
  // components: { vueSeamless },
  title: 'UL自定义表格组件',
  props: {
    tableTitle: {
      type: Array,
      twoWay: true,
      default: () => ([
        { label: '班级', props: 'class' },
        { label: '学科', props: 'subject' },
        { label: '老师', props: 'teacher' },
        { label: '时间', props: 'time', width: '150px' }
      ])
    },
    tableData: {
      type: Array,
      twoWay: true,
      default: () => ([
        { class: '六（一）班', subject: '语文', teacher: '王明明', time: '2021/03/02 09:00' },
        { class: '六（一）班', subject: '语文', teacher: '王明明', time: '2021/03/02 09:00' },
        { class: '六（一）班', subject: '语文', teacher: '王明明', time: '2021/03/02 09:00' },
        { class: '六（一）班', subject: '语文', teacher: '王明明', time: '2021/03/02 09:00' },
        { class: '六（一）班', subject: '语文', teacher: '王明明', time: '2021/03/02 09:00' },
        { class: '六（一）班', subject: '语文', teacher: '王明明', time: '2021/03/02 09:00' },
        { class: '六（一）班', subject: '语文', teacher: '王明明', time: '2021/03/02 09:00' }
      ])
    },
    trActive: {
      type: Number,
      default: null
    },
    textAlign: {
      type: String,
      default: 'center'
    }
  },
  filters: {
    dataEncrypt (value, encrypt = false) {
    }
  },
  data () {
    return {
      optionSetting
    }
  },
  methods: {
    handleTableTbodyTr (tr, td_attribute, td_value, tr_key, td_key) {
      this.$emit('trClick', tr, { td_attribute: td_value }, tr_key, td_key)
    },
    // 需要加密的数据格式化
    formatEncryptData (encrypt = false, value) {
      let newValue = value
      if (encrypt) {
        newValue = value.substring(0, 3) + '****' + value.substring(7)
      }
      return newValue
    }
  }
}
</script>

<style scoped lang="scss">
.table-ul{
  height: 100%;
}
.title-group,.tbody-group {
  display: flex;
  height: 32px;
  align-items: center;
  font-size: 14px;
  font-weight: 500;
  color: #FFF;
  letter-spacing: .5px;
  text-align: center;
  display: flex;
  .more-detail{
    display: none;
    position: absolute;
    background: #425f6d;
    border: 1px solid #6d828d;
    padding: 5px 10px;
  }
  li{
    height: 32px;
    line-height: 32px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    padding: 0 5px;
  }
}
li:hover .more-detail{
  display: block;
}
.title-group{
  border-bottom: 1px solid rgba(0, 153, 255, 0.4);
}
.tbody{
  height: calc(100% - 35px);
  overflow-y: auto;
  position: relative;
}
.tbody-group{
  border-bottom: 1px solid rgba(0, 153, 255, 0.4);
}
.tbody-group:nth-of-type(even){
}
.tbody-group:nth-of-type(odd){
}
</style>
